<script setup name="FilePicker">
const file = ref();

const visible = ref(false);

const onChange = (_, currentFile) => {
  file.value = {
    ...currentFile,
    // url: URL.createObjectURL(currentFile.file),
  };
};
const onProgress = (currentFile) => {
  file.value = currentFile;
};

const handleOpenPicker = () => {
  visible.value = true
}
const handleCancel = () => visible.value = false
const handleBeforeOk = () => visible.value = false;

const handleOk = () => {
  console.log('点击了确认');
  file.value = pickFile.value
}

const fileData = ref([
  {
    name: "文章图片",
    type: 'folder',
    id: 1,
    parentId: 0
  },
  {
    name: "商品图片",
    type: 'folder',
    id: 2,
    parentId: 0
  },
  {
    name: "轮播图片",
    type: 'folder',
    id: 3,
    parentId: 0
  },
  {
    name: "pCH86DH.png",
    type: 'picture',
    url: 'https://s1.ax1x.com/2023/07/20/pCH86DH.png',
    id: 4,
    parentId: 0
  },
  {
    name: "pC6Zx4H.jpg",
    type: 'picture',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx4H.jpg',
    id: 5,
    parentId: 0
  },
  {
    name: "日报.xlsx",
    type: 'document',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx432H.xlsx',
    id: 6,
    parentId: 0
  },
  {
    name: "需求文档.docx",
    type: 'document',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx432H.docx',
    id: 7,
    parentId: 0
  },
  {
    name: "需求文档.pptx",
    type: 'document',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx432H.pptx',
    id: 8,
    parentId: 0
  },
  {
    name: "App.vue",
    type: 'document',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx432H.vue',
    id: 9,
    parentId: 0
  },
  {
    name: "main.ts",
    type: 'document',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx432H.ts',
    id: 10,
    parentId: 0
  },
  {
    name: "一期合同.pdf",
    type: 'document',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx432H.pdf',
    id: 11,
    parentId: 0
  },
  {
    name: "两只蝴蝶.mp3",
    type: 'audio',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx432H.mp3',
    id: 12,
    parentId: 0
  },
  {
    name: "天龙八部-01.mp4",
    type: 'video',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx432H.mp4',
    poster: 'https://z3.ax1x.com/2021/09/23/4dPc8O.png',
    id: 13,
    parentId: 0
  },
  {
    name: "天龙八部-02.mp4",
    type: 'video',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx432H.mp4',
    poster: 'https://z3.ax1x.com/2021/09/23/4dPc8O.png',
    id: 14,
    parentId: 1
  },
  {
    name: "天龙八部-03.mp4",
    type: 'video',
    url: 'https://s1.ax1x.com/2023/07/06/pC6Zx432H.mp4',
    poster: 'https://z3.ax1x.com/2021/09/23/4dPc8O.png',
    id: 15,
    parentId: 1
  }
])

const fileSource = ref([...fileData.value.filter(o => o.parentId == 0)])

const handlerTypeChange = (type) => {
  if(type === null || type === undefined || type===''){
    fileSource.value = [...fileData.value.filter(o => o.parentId == 0)]
  }else{
    fileSource.value = [...fileData.value.filter(o => o.type == type)]
  }
}

const handleOpenFolder = (item) => {
  fileSource.value = [...fileData.value.filter(o => o.parentId == item.id)]
}

const pickFile = ref();

</script>

<template>
  <page-wrapper>
    <a-space :style="{ width: '100%' }">
      <a-upload action="/" :fileList="file ? [file] : []" :show-file-list="false" @change="onChange"
        @progress="onProgress">
        <template #upload-button>
          <div :class="`arco-upload-list-item${file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
            }`">
            <div class="arco-upload-list-picture custom-upload-avatar" v-if="file && file.url">
              <img :src="file.url" />
              <div class="arco-upload-list-picture-mask">
                <icon icon="material-symbols:edit-outline" />
              </div>
              <a-progress v-if="file.status === 'uploading' && file.percent < 100" :percent="file.percent" type="circle"
                size="mini" :style="{
                  position: 'absolute',
                  left: '50%',
                  top: '50%',
                  transform: 'translateX(-50%) translateY(-50%)',
                }" />
            </div>
            <div class="arco-upload-picture-card" v-else>
              <div class="arco-upload-picture-card-text">
                <icon icon="material-symbols:add" />
                <div style="margin-top: 10px; font-weight: 600">Upload</div>
              </div>
            </div>
          </div>
        </template>
      </a-upload>
      <a-button type="text" @click="handleOpenPicker">选择文件</a-button>
    </a-space>
  </page-wrapper>
  <a-modal width="80%" v-model:visible="visible" draggable title="选择文件" @cancel="handleCancel" @ok="handleOk">
    <file-store :data-source="fileSource" v-model="pickFile" key-field="id" @type-change="handlerTypeChange" @open-folder="handleOpenFolder"/>
  </a-modal>
</template>

<style lang="less" scoped></style>